<template>
    <div class="clearfix">
        <div class="pos-fix m-menu clearfix">
            <img class="fxl logo" src="../assets/images/logo.jpg">
            <button class="fxr" @click="menuList =!menuList"><i class="iconfont icon-menu"></i></button>
            <button class="fxr" @click="search =!search"><i class="iconfont fxr icon-search"></i></button>
        </div>
        <div class="m-search pos-fix blockAniTD" v-show="search">
            <i class="iconfont pos-abs icon-search"></i>
            <input placeholder="请输入您要搜索的内容">
        </div>
        <ul class="r-menu pos-fix blockAniTD" v-show="menuList">
            <li v-for="site in menu" :key="site.id">
                <router-link :to="{ path: site.path }"><span>{{site.name}}</span></router-link>
            </li>
        </ul>
    </div>

</template>

<script>
    import _http from "../httpService"

    export default {
        name: "Header",
        props: {
            msg: String
        },
        data() {
            return {
                loading: true,
                seen: false,
                menu: null,
                isSubshow: false,
                menuList:false,
                search:false,
            };
        },

        methods: {
            backTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            },
            // 移入
            mouseOver() {
                this.seen = true;
            },
            // 移出
            mouseLeave() {
                this.seen = false
            },
        },

        mounted() {
            _http.get("/menu/selectListByEnterpriseIdAndParentCode?parentCode=0")
                .then(response => {
                    this.menu = [];
                    // let tmp = [];
                    response.data.forEach(element => {
                        this.menu.push({name: element.name, path: element.routerPath});
                    });

                    // this.menu = tmp;
                })
                .catch(error => console.log(error))
                .finally(() => (this.loading = false));
        }
    };
</script>

<style>
    @import "../assets/css/mobile.css";
</style>
